<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<title>大麦商城</title>
<link href="css/common.css" rel="stylesheet" type="text/css"/>
<link href="css/cart.css" rel="stylesheet" type="text/css"/>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="/js/damai.js"></script>
</head>
<body>

<div class="container cart">
		<myheader @logined="onLogin"></myheader>
		<div class="span24">
		
			<div class="step step1">
				<ul>
					
					<li  class="current"></li>
					<li  >生成订单成功</li>
					<li  >订单号:73</li>
				</ul>
			</div>
		
				<table>
					<tbody>
					<tr>
						<th>图片</th>
						<th>商品</th>
						<th>价格</th>
						<th>数量</th>
						<th>小计</th>
					</tr>
					
						<tr v-for="c in carts">
							<td width="60">
								<img :src="c.product.image"/>
							</td>
							<td>
								<a target="_blank">{{c.product.pname}}</a>
							</td>
							<td>
								{{c.product.shopPrice}}
							</td>
							<td class="quantity" width="60">
								{{c.count}}
							</td>
							<td width="140">
								<span class="subtotal">￥{{c.product.shopPrice * c.count}}</span>
							</td>
						</tr>

				</tbody>
			</table>
				<dl id="giftItems" class="hidden" style="display: none;">
				</dl>
				<div class="total">
					<em id="promotion"></em>
					商品金额: <strong id="effectivePrice">￥{{order.total}}元</strong>
				</div>
			<form id="orderForm" action="msg.html" method="post">
				<input type="hidden" name="order.oid" value="73"/>
				<div class="span24">
					<p>
							收货地址：<input v-model="order.addr" type="text" style="width:350px" />
								<br />
							收货人&nbsp;&nbsp;&nbsp;：<input v-model="order.name" type="text" style="width:150px" />
								<br /> 
							联系方式：<input v-model="order.phone" type="text" style="width:150px" />

						</p>
						<hr />
						<p>
							选择银行：<br/>
							<input type="radio" name="pd_FrpId" value="ICBC-NET-B2C" checked="checked"/>工商银行
							<img src="bank_img/icbc.bmp" align="middle"/>&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="pd_FrpId" value="BOC-NET-B2C"/>中国银行
							<img src="bank_img/bc.bmp" align="middle"/>&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="pd_FrpId" value="ABC-NET-B2C"/>农业银行
							<img src="bank_img/abc.bmp" align="middle"/>
							<br/>
							<input type="radio" name="pd_FrpId" value="BOCO-NET-B2C"/>交通银行
							<img src="bank_img/bcc.bmp" align="middle"/>&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="pd_FrpId" value="PINGANBANK-NET"/>平安银行
							<img src="bank_img/pingan.bmp" align="middle"/>&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="pd_FrpId" value="CCB-NET-B2C"/>建设银行
							<img src="bank_img/ccb.bmp" align="middle"/>
							<br/>
							<input type="radio" name="pd_FrpId" value="CEB-NET-B2C"/>光大银行
							<img src="bank_img/guangda.bmp" align="middle"/>&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="pd_FrpId" value="CMBCHINA-NET-B2C"/>招商银行
							<img src="bank_img/cmb.bmp" align="middle"/>
						</p>
						<hr />
						<p style="text-align:right">
							<a @click.prevent="addOrder" href="#">
								<img src="images/finalbutton.gif" width="204" height="51" border="0" />
							</a>
						</p>
				</div>
			</form>
		</div>
		
	</div>
<script>
	var v = new Vue({
		el : "div.cart",
		data : {
			carts : [], // 购物车商品列表
			order : {}
		},
		methods : {
			onLogin(loginedUser){
				if(!loginedUser){
					return;
				}
				this.order.addr = loginedUser.addr;
				this.order.name = loginedUser.name;
				this.order.phone = loginedUser.phone;
				this.order.uid = loginedUser.uid;
				axios.get("/user/damai/cart/queryAll?uid="+loginedUser.uid)
					.then(res=> {
						this.carts = res.data;
						this.order.total = 0;
						this.carts.forEach(c => {
							this.order.total += c.product.shopPrice * c.count;
						})
					});
			},
			addOrder(){
				let p = new URLSearchParams();
				for (let name in this.order) {
					p.append(name, this.order[name]);
				}
				for (let i = 0; i < this.carts.length; i++) {
					p.append("orderitems["+i+"].pid", this.carts[i].pid);
					p.append("orderitems["+i+"].count", this.carts[i].count);
					p.append("orderitems["+i+"].subtotal", this.carts[i].count * this.carts[i].product.shopPrice);
				}
				axios.post("/addOrder",p).then(res=>{
					console.info("finish");
				});
			}
		}
	})
</script>

<div class="container footer">
	<div class="span24">
		<div class="footerAd">
					<img src="image\r___________renleipic_01/footer.jpg" alt="我们的优势" title="我们的优势" height="52" width="950">
</div>
</div>
	<div class="span24">
		<ul class="bottomNav">
					<li>
						<a href="#">关于我们</a>
						|
					</li>
					<li>
						<a href="#">联系我们</a>
						|
					</li>
					<li>
						<a href="#">诚聘英才</a>
						|
					</li>
					<li>
						<a href="#">法律声明</a>
						|
					</li>
					<li>
						<a>友情链接</a>
						|
					</li>
					<li>
						<a target="_blank">支付方式</a>
						|
					</li>
					<li>
						<a target="_blank">配送方式</a>
						|
					</li>
					<li>
						<a >SHOP++官网</a>
						|
					</li>
					<li>
						<a>SHOP++论坛</a>
						
					</li>
		</ul>
	</div>
	<div class="span24">
		<div class="copyright">Copyright © 2005-2013 Mango商城 版权所有</div>
	</div>
</div>
</body>
</html>